<template>
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">会员总人数</h3>
            <el-progress type="circle" :percentage="100" :format="formatTotalMember"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">今日新增会员</h3>
            <el-progress type="circle" :percentage="25" color="#67C23A" :format="formataddMember"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">预约总人数</h3>
            <el-progress type="circle" :percentage="100" color="#F56C6C" :format="formatTotalHealth"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">今日预约人数</h3>
            <el-progress type="circle" :percentage="25" color="#E6A23C" :format="formataddHealth"></el-progress>
          </el-card>
        </el-col>
      </el-row>
      <div class="block" style="margin-top:23px">
        <span class="demonstration">选择统计图显示的天数：</span>
        <select v-model="displayNum" style="margin-right:20px" @change="changeNum">
          <option value="7">7天</option>
          <option value="9">9天</option>
          <option value="11">11天</option>
          <option value="13">13天</option>
          <option value="15">15天</option>
        </select>
        <span class="demonstration">选择统计图的结束日期：</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          @input="changeDate">
        </el-date-picker>
      </div>
      <div id="columnar" style="width: 95%;height: 400px;margin: 20px"></div>
      <div id="main1" style="width: 93%;height: 400px;margin:20px"></div>
    </div>
</template>
<script>

import echarts from 'echarts'
export default {
  name: 'Count',
  data () {
    return {
      longMember: [], // 会员增长数量数组
      longMemberDate: [], // 会员增长日期数组
      // 日期选择器
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value2: '',
      displayNum: 7,
      option: null,
      moneyDate: [], // 体检人数日期数组
      opinionData: [], // 体检人数数组
      totalMember: '',
      addMember: '',
      totalHealth: '',
      addHealth: ''
    }
  },
  methods: {
    // 柱状图的显示方法
    columnar () {
      var columnar = echarts.init(document.getElementById('columnar'))
      let _this = this
      this.option = {
        title: {
          text: '会员每日增加柱状统计图',
          x: 'left'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: _this.longMemberDate,
            axisTick: {
              alignWithLabel: true
            },
            name: '日期'
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '会员数量'
          }
        ],
        series: [
          {
            name: '当日增长',
            type: 'bar',
            barWidth: '60%',
            data: _this.longMember
          }
        ]
      }
      columnar.setOption(this.option)
    },
    // 获取日期的方法
    beforeDays (num, date) {
      // 设置日期，当前日期的前num天
      let myDate = new Date(date) // 获取输入的日期
      myDate.setDate(myDate.getDate() - (num - 1))
      let dateArray = []
      let myMonth = myDate.getMonth() + 1
      if (myMonth >= 1 && myMonth <= 9) {
        myMonth = '0' + myMonth
      }
      let myDates = myDate.getDate()
      if (myDates >= 0 && myDates <= 9) {
        myDates = '0' + myDates
      }
      let dateTemp
      let flag = 1
      for (let i = 0; i < num; i++) {
        dateTemp = myDate.getFullYear() + '-' + myMonth + '-' + myDates
        dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
      }
      return dateArray[0]
    },
    // 查询会员增长
    queryMemberCount () {
      let date = []
      let dang = new Date()
      for (let index = 1; index <= this.displayNum; index++) {
        if (this.value2 === '') {
          date.unshift(this.beforeDays(index, dang))
        } else {
          date.unshift(this.beforeDays(index, this.value2))
        }
      }
      this.$axios.post(`/api/DHCountMemberController/queryTotalAndAdd`).then(({data}) => {
        this.totalMember = data.totalMember
        this.addMember = data.addMember
        this.totalHealth = data.totalHealth
        this.addHealth = data.addHealth
      })
      this.$axios.post(`/api/DHCountMemberController/queryMemberCount?dates=${date}`).then(result => {
        this.longMember = result.data
        this.longMemberDate = date
        this.columnar()
      })
      this.$axios.post(`/api/DHCountMemberController/queryHealthCount?dates=${date}`).then(result => {
        this.opinionData = result.data
        this.moneyDate = date
        this.drawLine('main1')
      })
    },
    // 改变日期时间触发
    changeDate () {
      // 重新查
      this.queryMemberCount()
      this.drawLine('main1')
    },
    // 改变天数触发
    changeNum () {
      this.queryMemberCount()
      this.drawLine('main1')
    },
    formatTotalMember (percentage) {
      return this.totalMember + '人'
    },
    formataddMember (percentage) {
      return this.addMember + '人'
    },
    formatTotalHealth (percentage) {
      return this.totalHealth + '人'
    },
    formataddHealth (percentage) {
      return this.addHealth + '人'
    },
    drawLine (id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title: {
          text: '预约数量折线统计图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['预约人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.moneyDate,
          name: '日期', // X轴 name
          nameTextStyle: {// 坐标轴名称的文字样式
            padding: [0, 0, 0, 0]
          },
          axisLine: {// 坐标轴轴线相关设置。
          }
        },
        yAxis: {
          name: '预约数量',
          nameTextStyle: {
          },
          axisLine: {
          },
          type: 'value'
        },
        series: [{
          name: '预约人数',
          type: 'line',
          stack: '总量',
          data: this.opinionData
        }]
      })
    }
  },
  // 加载方法
  created () {
    this.queryMemberCount()
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
